<template>
  <div class="trend">
    <div id="main"></div>
  </div>
</template>
<script>

  export default {
    data() {
      return {
        date: [],
        F_stage: [],
        F_Number: []
      }
    },
    created() {
      this.$http.get('http://zdssc.hiberbest.com/public/index.php/Index/index/indexs').then((response) => {
        // console.log(res)
        this.date = response.data
        // console.log(this.date)
      }).catch((error) => {
        console.log(error)
      })
      this._getNumber()
    },
    mounted() {
    },
    methods: {
      _Mychart() {
        let mychart = this.$echarts.init(document.getElementById('main'))
        mychart.setOption({
          title: {
            text: '',
            subtext: ''
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            }
          },
          toolbox: {
            show: true,
            feature: {
              // 是否允许保存图片
              // saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            nameLocation: 'start',
            min: 0,
            max: 9,
            splitNumber: 10,
            boundaryGap: false,
            nameRotate: 90,
            axisLabel: {
              interval: 0,
              rotate: 60
            },
            data: [this.F_stage[0], this.F_stage[1], this.F_stage[2], this.F_stage[3],
              this.F_stage[4], this.F_stage[5], this.F_stage[6], this.F_stage[7],
              this.F_stage[8], this.F_stage[9]]
          },
          yAxis: {
            type: 'value',
            min: 1,
            max: 10,
            splitNumber: 9,
            data: ['1', '2', '3', '4'],
            axisLabel: {
              formatter: '{value}'
            },
            axisPointer: {
              snap: true
            }
          },
          visualMap: {
            show: false,
            min: 0,
            max: 10,
            dimension: 0
          },
          series: [
            {
              type: 'line',
              smooth: true,
              data: [this.F_Number[0], this.F_Number[1], this.F_Number[2],
                this.F_Number[3], this.F_Number[4], this.F_Number[5], this.F_Number[6],
                this.F_Number[7], this.F_Number[8], this.F_Number[9]]
            }
          ]
        })
      },
      _getNumber() {
        setTimeout(() => {
          for (let i = 0; i < this.date.length; i++) {
            this.F_stage.push(this.date[i].qishu + '期')
            this.F_Number.push(this.date[i].ball1)
          }
          this._Mychart()
        }, 200)
      }
    }
  }
</script>
<style scoped lang="less" rel="stylesheet/less">
  #main {
    width: 96%;
    height: 370px;
    padding-left: 2%;
    /*margin-top: -30px;*/
  }
</style>
